<template>
  <view>
    <button @click="goToConnectPage">连接打印机</button>
    <button @click="printLabel">打印测试</button>
  </view>

  <view>


    <canvas v-if="platform === 'DingTalk'"
            id="myCanvas"
            ref="myCanvas"
            :width="canvasWidthResponsive"
            :height="canvasHeightResponsive"
    ></canvas>

    <canvas v-else-if="platform === 'WeChat'|| platform === 'FeiShu'"
            canvas-id="myCanvas"
            ref="myCanvas"
            :style="{
                  width: canvasWidthResponsive + 'px',
                  height: canvasHeightResponsive + 'px'
                }"
    ></canvas>
  </view>
</template>

<script>
import {ref, onMounted, nextTick} from 'vue';
import {usePrint} from '@/composables/print';

export default {
  setup() {
    const platform = ref(null);
    const quantity = ref(2);
    const printed = ref(0);
    const myCanvas = ref(null);
    const canvasWidthResponsive = ref(400);
    const canvasHeightResponsive = ref(300);

    onMounted(() => {
      uni.getSystemInfo({
        success: function (res) {
          console.log("res.hostName", res.hostName)
          switch (res.hostName) {
            case 'WeChat':
            case 'wxwork':
              setPlatform('微信');
              platform.value = 'WeChat';
              break;
            case 'DingTalk':
              setPlatform('钉钉');
              platform.value = 'DingTalk';
              break;
            case 'Feishu':
              setPlatform('飞书');
              platform.value = 'FeiShu';
              break;
            default:
              console.log('未识别的平台');
          }
        },
      });
    });

    const {
      setPlatform,
      getSn,
      startJob,
      startDrawLabel,
      drawText,
      endDrawLabel,
      print,
      didReadPrintCountInfo,
      didReadPrintErrorInfo
    } = usePrint();

    const goToConnectPage = () => {
      uni.navigateTo({
        url: '../index/index'
      });
    };


    const printLabel = () => {
      let connectStatus = 0;
      getSn((res) => {
        if (res.code === -4) {
          connectStatus = -4;
        }

        if (connectStatus === -4) {
          uni.showToast({
            title: '打印机未连接',
            icon: 'none'
          });
          return;
        }

        printed.value = 0;
        uni.showToast({
          title: '开始打印'
        });

        didReadPrintCountInfo((res) => {
          console.log(res.count);
        });

        didReadPrintErrorInfo((res) => {
          console.log(res.errCode);
        });

        startJob(1, 3, quantity.value, () => {
          starPrint();
        });
      });
    };

    const starPrint = async () => {
      printed.value += 1;
      const labelWidth = 50;
      const labelHeight = 30;
      const multiple = 8;
      canvasWidthResponsive.value = labelWidth * multiple;
      canvasHeightResponsive.value = labelHeight * multiple;
      await nextTick();
      const ctx = uni.createCanvasContext('myCanvas');
      ctx.setFillStyle('#FFF');
      ctx.fillRect(0, 0, canvasWidthResponsive.value, canvasHeightResponsive.value);
      ctx.draw(false, () => {
        startDrawLabel("myCanvas", myCanvas.valueOf(), labelWidth, labelHeight, 0);
        drawText("打印测试 " + printed.value, 2, 24, 3, 0);
        endDrawLabel(() => {
          print(1, () => {
            if (quantity.value > printed.value) {
              starPrint();
            }
          });
        });
      })

    };

    return {
      myCanvas,
      quantity,
      printed,
      canvasWidthResponsive,
      canvasHeightResponsive,
      goToConnectPage,
      printLabel,
      setPlatform,
      platform
    };
  },
};
</script>

<style>
canvas {
  position: absolute; /* 使用绝对定位 */
  /* border: 1px solid #2c405a; */
  left: 100%;
  width: 100%;
  height: 100%;
}
</style>
